<template>
  <div class="container">
    <div class="screen" ref="ScreenVc">
      <!--顶部Div-->

      <div class="header">
        <!--顶部组件-->

        <HeaderComponent/>
      </div>

      <!--下部统计视图组件-->
      <div class="mainDisplay">

        <!--左侧-->
        <div class="main-left">
          <!--顶部上-->
          <div class="left-top">
            <LeftTopComponent/>
          </div>
          <!--顶部下-->
          <div class="left-bottom">
            <LeftBottomComponent/>
          </div>
        </div>

        <!--中间-->
        <div class="main-mid">
          <!--中间上-->
          <div class="mid-top">
            <MidTopComponent/>
          </div>
          <!--中间下-->
          <div class="mid-bottom">
            <MidBottomComponent/>
          </div>
        </div>

        <!--右侧-->
        <div class="main-right">
          <!--右侧上-->
          <div class="right-top">
            <RightTopComponent/>
          </div>
          <!--右侧下-->
          <div class="right-bottom">
            <RightBottomComponent/>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//数据大屏的dom元素
//@ts-ignore
import {onBeforeMount, onBeforeUnmount, onMounted, ref, watch} from "vue";
//引入子组件
import HeaderComponent from "./header/index.vue"
//引入左侧组件
//@ts-ignore
import LeftTopComponent from "./mainDisplay/left/top/index.vue"
//@ts-ignore
import LeftBottomComponent from "./mainDisplay/left/bottom/index.vue"
//中间组件
//@ts-ignore
import MidTopComponent from "./mainDisplay/mid/top/index.vue"
//@ts-ignore
import MidBottomComponent from "./mainDisplay/mid/bottom/sim/index.vue"
//右侧组件
//@ts-ignore
import RightTopComponent from "./mainDisplay/right/top/index.vue"
//@ts-ignore
import RightBottomComponent from "./mainDisplay/right/bottom/index.vue"
import getDataStore from "@/piniaStore/Data/dataStore.ts";
import {T_SimInfo} from "@/assets/dataDemo/type.ts";


let updateDataInterval: any = null; // 用于存储定时器引用
//实例Vc
let ScreenVc = ref<any>();

let dataStore = getDataStore()

//挂载完毕 往回拽
onMounted(() => {
  ScreenVc.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
});


//定义大屏缩放比例
const getScale = (w: number = 1920, h: number = 1080) => {
  let ww = window.innerWidth / w;
  let wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}

//监听视口变化
window.onresize = () => {
  ScreenVc.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
  window.location.reload();
}

//获取数据
onBeforeMount(() => {
  updateDataInterval = setInterval(updateStoreData, 1500);//每隔1.5s更新一次数据
  dataStore.getFlightData()
})

let fakeSimInfoes: T_SimInfo[] = [
  {
    "numberOfCycles": 0,
    "time": 0.0,
    "crackLength": 0
  },
  {
    "numberOfCycles": 2000,
    "time": 0.15,
    "crackLength": 0
  },
  {
    "numberOfCycles": 2500,
    "time": 0.30,
    "crackLength": 0
  },
  {
    "numberOfCycles": 3700,
    "time": 0.45,
    "crackLength": 6
  },
  {
    "numberOfCycles": 4200,
    "time": 0.75,
    "crackLength": 8
  },
  {
    "numberOfCycles": 4500,
    "time": 1.05,
    "crackLength": 10
  },
  {
    "numberOfCycles": 4800,
    "time": 1.25,
    "crackLength": 20
  },
]
let count = ref(0);

const updateStoreData = () => {
  dataStore.flightData.simInfo = fakeSimInfoes[count.value]
  count.value++;
}

watch(() => count.value, () => {
  if (count.value > fakeSimInfoes.length - 1) {
    count.value = 0;
  }
})

// 清理定时器，避免内存泄漏
onBeforeUnmount(() => {
  if (updateDataInterval) {
    clearInterval(updateDataInterval);
    updateDataInterval = null;
  }
});


</script>


<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: url(../../assets/images/background.jpg) no-repeat;
  background-size: cover;

  .screen {
    background: url(../../assets/images/bg.jpg) no-repeat;
    position: fixed;
    width: 1920px;
    height: 1080px;

    left: 50%;
    top: 50%;
    transform-origin: left top; //设置缩放锚点
    //布局设置
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;

    .header {
      height: 8%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

    }

    .mainDisplay {
      width: 100%;
      height: 92%;
      display: flex;

      .main-left {
        flex: 1.5;
        display: flex;
        flex-direction: column;
        padding: 5px;


        .left-top {
          flex: 2.3;
          //background-color: rebeccapurple;
          margin-bottom: 20px;
          background: url(../../assets/images/bg_bk4.png);
          background-size: 100% 100%;
        }

        .left-bottom {
          flex: 2;
          //background-color: green;
          background: url(../../assets/images/bg_bk4.png);
          background-size: 100% 100%;
        }
      }

      .main-mid {
        flex: 4;
        margin: 0 15px;
        padding: 5px;
        //background-color: aqua;
        display: flex;
        flex-direction: column;
        //background-color: #93efc2;

        .mid-top {
          flex: 5.3;
          //background-color: cornflowerblue;
          //margin-bottom: 0;

        }

        .mid-bottom {
          flex: 4;
          height: 30%;
          background: url(../../assets/images/bg_bk4.png);
          background-size: 100% 100%;
        }
      }

      .main-right {
        flex: 1.3;
        //background-color: darkorange;
        display: flex;
        flex-direction: column;
        padding: 5px;

        .right-top {
          flex: 1;
          //background-color: whitesmoke;
          margin-bottom: 20px;
          background: url(../../assets/images/bg_bk4.png);
          background-size: 100% 100%;

        }

        .right-bottom {
          flex: 1;
          //background-color: rosybrown;
          background: url(../../assets/images/bg_bk4.png);
          background-size: 100% 100%;

        }
      }
    }


  }
}
</style>